<template>
    <el-card>
        <div style="text-align: left; margin-bottom: 20px;">
            <el-button type="primary" @click="add">新增明细</el-button>
            <el-button type="primary" @click="make" icon="el-icon-edit">生成脚本</el-button>
            <el-button type="primary" @click="chooseQr">选择二维码</el-button>
            <el-button type="primary" @click="test">测试二维码</el-button>
        </div>
        <div>
            脚本名： <el-input v-model="name" style="width: auto"/>
            包名：<el-input v-model="packageName" style="width: auto"/>
            分隔符：<el-input v-model="splitCode" style="width: auto"/>
        </div>
        <el-table :data="list">
            <el-table-column type="index" width="50"/>
            <el-table-column label="字段名">
                <el-select v-model="scope.row.name" slot-scope="scope" allow-create filterable>
                    <el-option v-for="v in fields" :label="v" :value="v"/>
                </el-select>
            </el-table-column>
            <el-table-column label="字段取值(0表示开始或结束)">
                <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="right" slot="header">
                    <font slot="default">
                        字段取值(移动到此看说明)
                    </font>
                    <div slot="content">
                        选前两个写0,2
                        <br>
                        选后两个写-2,0
                        <br>
                        选第二个到倒数第二个写1,-2
                        <br>
                        从倒数第10个到倒数第2个写-10,-2
                        <br>
                        选全部写0,0
                    </div>
                </el-tooltip>
                <template slot-scope="scope">
                    从 <el-input-number v-model="scope.row.start"/>
                    至 <el-input-number v-model="scope.row.end" />
                </template>
            </el-table-column>
            <el-table-column label="字段位置(从0开始)">
                <el-input-number slot-scope="scope" v-model="scope.row.pos"/>
            </el-table-column>

            <el-table-column label="操作">
                <el-button type="text" @click="list.splice(scope.$index,1)" slot-scope="scope">删除</el-button>
            </el-table-column>
        </el-table>


        <div style="display: flex; flex-direction: row; margin-top: 20px;">
            <img :src="qrCode" alt="" v-if="qrCode" width="300">
            <el-form v-if="result" label-width="200px">
                <el-form-item v-for="(v,k) in result" :label="k">
                    <el-input :value="v"/>
                </el-form-item>
            </el-form>
        </div>

    </el-card>
</template>

<script>
    import fileDownload from 'js-file-download'
    export default {
        name: "groovy-maker",
        data(){
            return {
                name:"test",
                packageName: "gather.customerRule",
                splitCode:"**",
                list:[],
                qrCode: "",
                fields: ["lotId","dateCode","packageId","qty","lotIdType","customerBill","companyName","parentId","level","templateName","relatedObjId","ATTRIBUTE1","ATTRIBUTE2","ATTRIBUTE3","ATTRIBUTE4","ATTRIBUTE5","ATTRIBUTE6","ATTRIBUTE7","ATTRIBUTE8","ATTRIBUTE9","ATTRIBUTE10","ATTRIBUTE11","ATTRIBUTE12","ATTRIBUTE13","ATTRIBUTE14","ATTRIBUTE15","itemCode","extendPropC1","extendPropC2","extendPropC3","extendPropC4","extendPropC7","extendPropC5","extendPropC6","extendPropC10"],
                result: null
            }
        },
        methods:{
            async test(){
                var r = await this.$post("/api/tools/groovy-maker/test", {
                    name: this.name, list:this.list, packageName: this.packageName, splitCode: this.splitCode, qrCode: this.qrCode
                })
                this.result = r
                console.log(r)
            },
            chooseQr(){
                var elem = $("<input type=file style='display: none' />")
                elem.appendTo("body")
                elem.change(e => {
                    var file = e.target.files[0]
                    var reader = new FileReader()
                    reader.onload = (e) => {
                        this.qrCode = e.target.result
                    }
                    reader.readAsDataURL(file)
                })
                elem.click()//.remove()
            },
            add(){
               this.list.push({
                    name:"",
                    start: 0,
                    end: 0,
                    pos:0
               })
            },
            async make(){
                var t = this;
                $.ajax({
                    url: "/api/tools/groovy-maker/make",
                    type:"post",
                    data:JSON.stringify({
                        name: this.name, list:this.list, packageName: this.packageName, splitCode: this.splitCode, qrCode: this.qrCode
                    }),
                    contentType:"application/json",
                    xhr: function () {
                        var xhr = new XMLHttpRequest()
                        xhr.responseType = 'blob'
                        return xhr
                    },
                    success(data){
                        fileDownload(data, t.name + '-groovy.zip');
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>